<template>
  <t-form
    ref="formRef"
    :data="assessDetail"
    :requiredMark="false"
    @submit="onSubmit"
  >
    <div
      class="upload-container"
      :class="isDetail ? 'upload-con2' : 'upload-con1'"
    >
      <!-- 左侧菜单 -->
      <t-menu
        class="upload-container__menu"
        theme="light"
        :expanded="expandedKeys"
        @expand="handleExpand"
        @change="handleMenuChange"
        v-model:value="defaultValue"
      >
        <t-submenu
          mode="popup"
          v-for="item in assessDetail"
          :key="item.id"
          :value="item.code"
        >
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <t-menu-item
            v-for="child in item?.child"
            :key="child.id"
            :value="child.code"
          >
            {{ child.name }}</t-menu-item
          >
        </t-submenu>
      </t-menu>
      <t-divider class="upload-container__line" layout="vertical" />
      <!-- 右侧内容 -->
      <div
        class="upload-container__up"
        ref="scrollContainer"
        @scroll.passive="handleScroll"
      >
        <div v-for="(item, gIndex) in assessDetail" :key="item.code">
          <div class="title" :id="item.child[0].code">
            {{ item.name }}
          </div>
          <div
            v-for="(child, pIndex) in item.child"
            :id="child.code"
            :key="item.code"
          >
            <div class="sub-title">{{ child.name }}</div>
            <div
              v-for="(grandson, cIndex) in child.child"
              :key="item.code"
              class="form-container"
            >
              <!-- <div class="txt-name">
                {{ grandson.name }}
                <t-popup :content="grandson.ms"
                  ><icon style="cursor: pointer" name="info-circle"
                /></t-popup>
              </div> -->
              <div class="txt-label">评估得分</div>
              <!-- :disabled="isDetail || grandson?.sfhg === 0" -->
              <t-radio-group v-model="grandson.sfsy" >
                <t-radio :value="0">100%</t-radio>
                <t-radio :value="1">70%</t-radio>
                <t-radio :value="2">50%</t-radio>
                <t-radio :value="3">0%</t-radio>
              </t-radio-group>
              <div   v-if="approvalStatus != 0 && grandson.sfsy !== 3" class="txt-label">证据文件</div>
                <t-upload
                ref="uploadRef"
                v-if="approvalStatus != 0 && grandson.sfsy !== 3"
                class="up-container"
                v-model="grandson.optionsFileList"
                theme="file-flow"
                multiple
                name="files"
                :headers="{ authorization: token }"
                :action="url"
                placeholder="支持批量上传文件，文件格式不限，最多只能上传 5 份文件"
                :abridge-name="[6, 6]"
                :auto-upload="autoUpload"
                :max="5"
                :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不能超过10MB' }"
                :disabled="grandson?.sfhg === 0"
                @fail="handleFail"
                @remove="handleRemove"
                :onValidate="handleValidate"
              >
                <template v-if="grandson?.sfhg === 0" #fileListDisplay="{ files, dragEvents }">
                    <div class="custom-upload-display">
                      <div class="upload-table">
                        <div class="upload-table-header">
                          <div style="width: 34%">文件名</div>
                          <div style="width: 23%">大小</div>
                          <div style="width: 23%">状态</div>
                          <div style="width: 20%">操作</div>
                        </div>
                        <div class="upload-table-body">
                          <!-- {{files}} -->
                          <div v-for="(file, index) in files" :key="index" class="upload-table-row">
                            <div class="table-cell" style="width: 34%">
                              <span class="file-name table-txt">{{ file.name }}</span>
                            </div>
                            <div class=" table-txt" style="width: 23%">{{ formatFileSize(file.size) }}</div>
                            <div class=" table-txt txt-center" style="width: 23%">
                              <img class="table-success" src="@/assets/image/success.png" alt="">
                              <span class="table-txt" style="margin-left: 8px;">上传成功</span>
                            </div>
                            <div  style="width: 20%">
                              <t-button variant="text" size="small" theme="primary" @click="handlePreview(file)" :disabled="getFileType(file.name) === 'unknown'">
                                预览
                              </t-button>
                               <t-button style="margin-left: 10px;" variant="text" size="small" theme="primary" @click="downloadFile(file.sjhgPath)">
                                下载
                              </t-button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                </template>
              </t-upload>
              <div class="txt-label">访谈结论</div>
              <t-textarea
                    v-model="grandson.bhgReason"
                    :class="
                      isShowValidate &&
                      (grandson.bhgReason === '' || grandson.bhgReason === null)
                        ? 'validate-ta'
                        : ''
                    "
                    placeholder="请输入内容"
                    :disabled="isDetail"
                     :autosize="{ minRows: 2}"
                  />
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="fixed-container" v-if="!isDetail">
        <!-- <t-checkbox
          class="checkbox"
          v-if="approvalStatus === 0 && isShowDHCheckbox"
          v-model:checked="isShowDH"
          @change="showDHChange"
          >只看打回项目</t-checkbox
        > -->
        <!-- <span v-else></span> -->
        <t-space :size="8" class="fixed-container__btn">
          <t-popup
            showArrow
            destroy-on-close
            trigger="click"
            class="popup"
            :visible="popupVisible"
            width="280px"
          >
            <template #content>
              <!-- v-if="noSHDataCount" -->
              <div class="title-container" v-if="noSHDataCount">
                <div class="title-container__title">
                  你还有{{ noSHDataCount }}项目/意见说明未填
                </div>
                <icon
                  class="title-container__icon"
                  name="close"
                  size="20px"
                  @click="onToggle"
                />
              </div>
              <div class="anchor-container" v-if="noSHData">
                <div v-for="item in noSHData" :key="item.optionsCode">
                  <div class="anchor-container__name">{{ item.name }}</div>
                  <t-menu
                    v-model:value="defaultValue"
                    @change="handleMenuChange2"
                  >
                    <t-menu-item
                      :value="child.optionsCode"
                      v-for="child in item.child"
                      :key="child.optionsCode"
                    >
                      {{ child.name }}
                      <template #icon v-if="defaultValue === child.optionsCode">
                        <img
                          class="anchor-container__img"
                          src="@/assets/image/anchor.png"
                          alt=""
                        />
                      </template>
                    </t-menu-item>
                  </t-menu>
                </div>
              </div>
            </template>
            <div class="tx-txt" @click="onToggle" v-if="noSHDataCount">
              <img class="img" src="@/assets/image/tx.svg" />
              <span class="tx-con">还有{{ noSHDataCount }}必填项未填</span>
            </div>
          </t-popup>
          <t-form-item>
            <t-space :size="8">
              <t-button theme="default" variant="outline" @click="clickCancel"
                >取消</t-button
              >
              <t-button theme="default" variant="outline" @click="saveAppraval"
                >保存</t-button
              >
              <t-button theme="primary" type="submit">提交</t-button>
            </t-space>
          </t-form-item>
        </t-space>
      </div>
    </div>
  </t-form>
  <!-- 弹框 -->
  <t-dialog
    v-model:visible="noQualifiedVisible"
    theme="warning"
    header="是否打回不合格的资料"
    :body="bodyCon"
    :on-close="noQualifiedClose"
    @confirm="noQualifiedConfirm"
    confirm-btn="确认打回"
  />
  <t-dialog
    v-model:visible="qualifiedVisible"
    theme="warning"
    header="确定资料是否全部合格"
    body="经系统核实，所有必填项均已完成，且提交资料全部合格，如确定全部合格，需尽快出具报告。"
    :on-close="qualifiedClose"
    @confirm="qualifiedConfirm"
    confirm-btn="确定合格"
  />
  <t-dialog
    v-model:visible="cancelVisible"
    theme="warning"
    header="确定取消吗？"
    body="您还未完成项目填写，确定取消吗？取消后填写数据将不会被保存"
    :on-close="cancelClose"
    @confirm="cancelConfirm"
    confirm-btn="确定"
  />
  <t-dialog
    v-model:visible="saveVisible"
    theme="warning"
    header="确认保存吗？"
    body="请确认保存信息"
    :on-close="saveClose"
    @confirm="saveConfirm"
    confirm-btn="确认"
  />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { Icon } from "tdesign-icons-vue-next";
import { approvalInterviewDetail, approvalInterview } from "@/api/sjhg/approval";
import { useRouter } from "vue-router";
import { MessagePlugin } from "tdesign-vue-next";
import { downloadFile2 } from '@/api/sjhg/upload'; 
const router = useRouter();
const countDH = ref(0); //被打回审核的数量
let bodyCon = null;
//是否展示校验
const isShowValidate = ref(false);
const props = defineProps({
  assessId: {
    type: String,
    default: "",
  },
  approvalStatus: {
    type: Number,
    default: 0,
  },
  isDetail: {
    type: Number,
    default: 0,
  },
});
//审核项详情
const assessDetail = reactive([]);

//统计打回数量  没有打回时  checkbox不显示
const isShowDHCheckbox = ref(false)

//------未审核数据+数量--------------
const noSHData = reactive([]);
const noSHDataCount = ref(0);
//--------------锚点----------------
const scrollContainer = ref(null);
let observer = null;
const defaultValue = ref(null); //默认选中menu
const formRef = ref(null);

// status 0 暂存   1提交
const formData = ref({
  assessId: props.assessId,
  assessItemList: null,
  status: 1,
});

const expandedKeys = ref([])

  // 菜单展开/收起回调
const handleExpand = (keys) => {
  console.log('当前展开的菜单:', keys);
  expandedKeys.value = keys;
};


////资料取消弹框
const cancelVisible = ref(false);
//点击取消按钮
const clickCancel = () => {
  cancelVisible.value = true;
};
//弹框的取消
const cancelClose = () => {
  cancelVisible.value = false;
};
//弹框的确定事件
const cancelConfirm = () => {
  router.push({ path: "./list" });
};

const isShowDH = ref(false);
const originalData = reactive([]);
const showDHChange = (val) => {
  if (val == true) {
    //只看打回
    const filterDHData = assessDetail
    .map((p) => ({
      ...p,
      child: (p?.child || [])
        .map((c) => ({
          ...c,
          child: (c?.child || []).filter((g) => {
            return g.isReturn == 1;
          }),
        }))
        .filter((c) => (c?.child || []).length > 0), // 保留有孙子节点的子节点
    }))
    .filter((p) => (p?.child || []).length > 0); // 保留有子节点的父节点
    //审核打回的数据
    console.log("dhData--->", filterDHData);
    // Object.assign(assessDetail, filterDHData);
    updateAssessDetail(filterDHData)
    defaultValue.value = filterDHData[0].child[0].optionsCode;
  } else {
    // Object.assign(assessDetail, originalData);
    updateAssessDetail(originalData)
  }
};
//更新数据
const updateAssessDetail = (filteredData) => {
  // 清空数组
  assessDetail.splice(0, assessDetail.length);
  // 重新填充
  filteredData.forEach(item => assessDetail.push(item));
};
//----------------------------------暂存-------------------------------------
const saveVisible = ref(false)
const saveClose = () =>{
  saveVisible.value = false
}
const saveConfirm = () =>{
  submitFunction();
}
const saveAppraval = () => {
  saveVisible.value = true
  formData.value.status = 0;
  if (isShowDH.value) {
    //如果是只显示打回
    console.log("originalData===>", originalData);
    const grandchildrenData = originalData
      .flatMap((parent) => parent.child || []) // 获取所有子级
      .flatMap((child) => child.child || []) // 获取所有孙子级
      .map((grandchild) => ({
        optionsCode: grandchild.optionsCode,
        sfhg: grandchild.sfhg,
        reason: grandchild.bhgReason,
      }));
    formData.value.assessItemList = grandchildrenData;
  } else {
    const grandchildrenData = assessDetail
      .flatMap((parent) => parent.child || []) // 获取所有子级
      .flatMap((child) => child.child || []) // 获取所有孙子级
      .map((grandchild) => ({
        optionsCode: grandchild.optionsCode,
        sfhg: grandchild.sfhg,
        reason: grandchild.bhgReason,
      }));
    formData.value.assessItemList = grandchildrenData;
  }
};
//-------------------------------------------提示框------------------------------------------------------

//资料打回弹框
const noQualifiedVisible = ref(false);
const noQualifiedClose = () => {
  noQualifiedVisible.value = false;
};
const noQualifiedConfirm = () => {
  submitFunction();
};
//资料合格弹框
const qualifiedVisible = ref(false);
const qualifiedClose = () => {
  qualifiedVisible.value = false;
};
const qualifiedConfirm = () => {
  submitFunction();
};

//------------------------------onSubmit-----------------------------------
const onSubmit = async () => {
  isShowValidate.value = true;
  await handleNoSH();
  if (noSHDataCount.value === 0) {
    if (isShowDH.value) {
      //如果是打回
      console.log("originalData===>", originalData);
      const grandchildrenData = originalData
        .flatMap((parent) => parent.child || []) // 获取所有子级
        .flatMap((child) => child.child || []) // 获取所有孙子级
        .map((grandchild) => ({
          optionsCode: grandchild.optionsCode,
          sfhg: grandchild.sfhg,
          reason: grandchild.bhgReason,
        }));
      formData.value.assessItemList = grandchildrenData;
    } else {
      const grandchildrenData = assessDetail
        .flatMap((parent) => parent.child || []) // 获取所有子级
        .flatMap((child) => child.child || []) // 获取所有孙子级
        .map((grandchild) => ({
          optionsCode: grandchild.optionsCode,
          sfhg: grandchild.sfhg,
          reason: grandchild.bhgReason,
        }));
      formData.value.assessItemList = grandchildrenData;
    }
    console.log("--------", formData.value);
    countDH.value = formData.value.assessItemList.filter(
      (item) => item.sfhg === 1
    )?.length;
    if (countDH.value > 0) {
      bodyCon = `经系统核实，所有必填项均已完成，存在${countDH.value}项不合格的资料，是否打回不合格资料重新填写提交`;
      noQualifiedVisible.value = true;
    } else {
      qualifiedVisible.value = true;
    }
  }else {
    MessagePlugin.warning(`还有${noSHDataCount.value}必填项未填，请填完后再提交`)
  }
};

//------------------------------------------------------提交访谈评估--------1.1----------------------------------------------------------------------
function submitFunction() {
  approvalInterview(formData.value)
    .then((res) => {
      if (res.code == 200) {
        MessagePlugin.success(res.msg);
        isShowValidate.value = false;
        //成功后跳转到列表
        router.push({ path: "./list" });
      } else {
        MessagePlugin.error(res.msg);
      }
    })
    .finally(() => {});
}
//------------------------获取未填报项--------------------------------------
//未审核填报项
const handleNoSH = () => {
  const filteredData = assessDetail
  .map((p) => ({
      ...p,
      child: (p?.child || [])
        .map((c) => ({
          ...c,
          child: (c?.child || []).filter((g) => {
            if (g.sfhg === null) {
              return g;
            } else if (g.sfhg === 1) {
              return !g.bhgReason || g.bhgReason === "";
            }
            return false; // 其他情况不保留
          }),
        }))
        .filter((c) => (c?.child || []).length > 0), // 保留有孙子节点的子节点
    }))
    .filter((p) => (p?.child || []).length > 0); // 保留有子节点的父节点
    // .map((p) => ({
    //   ...p,
    //   child: p?.child
    //     .map((c) => ({
    //       ...c,
    //       child: c?.child?.filter((g) => {
    //         if (g.sfhg === null) {
    //           return g;
    //         } else if (g.sfhg === 1) {
    //           return g.bhgReason === null || g.bhgReason === "";
    //         }
    //       }),
    //     }))
    //     .filter((c) => c?.child?.length > 0),
    // }))
    // .filter((p) => p?.child?.length > 0);
  //未填报赋值
  updateNoSHData(filteredData)
  // Object.assign(noSHData, filteredData);

  console.log("noSHData===>", noSHData);

  const getchildrenData = noSHData
    .flatMap((parent) => parent.child || []) // 获取所有子级
    .flatMap((child) => child.child || []) // 获取所有孙子级
    .map((grandchild) => ({
      optionsCode: grandchild.optionsCode,
    }));
  noSHDataCount.value = getchildrenData?.length;
  console.log("noSHDataCount.value---->", noSHDataCount.value);
};
//更新数据
const updateNoSHData = (filteredData) => {
  // 清空数组
  noSHData.splice(0, noSHData.length);
    // 重新填充
    filteredData.forEach(item => noSHData.push(item));
};


//------------------------------------弹框  锚点-------------------------------------------------------
const popupVisible = ref(false);
//关闭或展示popup
const onToggle = () => {
  popupVisible.value = !popupVisible.value;
};
const handleMenuChange = (val) => {
  const target = document.getElementById(val);
  if (target) {
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  }
};
const handleMenuChange2 = (val) => {
  const target = document.getElementById(val);
  if (target) {
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  }
  //点击弹出的菜单 popup关闭
  onToggle();
};

//----------------------------锚点处理逻辑--------------------------------------
onMounted(async() => {
  if (props.assessId) {
    await getDetail();
  }
  initIntersectionObserver();
});
onBeforeUnmount(() => {
  if (observer) observer.disconnect();
});

// 初始化观察器‌:ml-citation{ref="3,6" data="citationList"}
const initIntersectionObserver = () => {
  const options = {
    root: scrollContainer.value,
    threshold: 0.5,
    rootMargin: "0px",
  };
  observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        defaultValue.value = entry.target.id;
      }
    });
  }, options);
  assessDetail.forEach((item) => {
    item.child.forEach((child) => {
      const el = document.getElementById(child.optionsCode);
      if (el) observer.observe(el);
    });
  });
};
//-----------------------访谈评估详情接口---1.1------------------------------
const getDetail = () => {
  let params = {};
  params.assessId = props.assessId;
  approvalInterviewDetail(params)
    .then((res) => {
      if (res.code == 200) {
        // reactive 赋值方式
        Object.assign(assessDetail, res.data);
        Object.assign(originalData, res.data);
        defaultValue.value = res.data[0].child[0].code;
        expandedKeys.value = assessDetail.map(item => item.code);

        console.log("==detail===>", assessDetail);
      }
    })
    .finally(() => {});
};


// ------------------- 下载 ---------------------
const downloadFile = async (objectPath) => {
  try {
    // const response = await axios.get('/sjhg/minio/download', {
    //   params: { bucketName: bucket, objectPath },
    //   responseType: 'blob'
    // });

    var params = {}
    params.objectPath = objectPath
    const response = await downloadFile2(params);

    // 生成临时下载链接
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', objectPath.split('/').pop() || 'file');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
};

//----------------------------文件预览------------------------------------
// 在 script setup 中添加以下方法
const formatFileSize = (size) => {
  if (!size) return '0 B';
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
  return `${(size / (1024 * 1024)).toFixed(2)} MB`;
};

function getFileType(filename) {
  const extension = filename.split('.').pop().toLowerCase();
  switch (extension) {
    case 'doc':
    case 'docx':
      return 'word';
    case 'xls':
    case 'xlsx':
    // case 'csv':
      return 'excel';
    case 'pdf':
      return 'pdf';
    case 'jpg':
    case 'jpeg':
    case 'png':
      return 'image';
    default:
      return 'unknown';
  }
}

const handlePreview = (file) => {
  //文件类型  fileType 
  // 实现预览逻辑
  if (file.url) {
    // 如果是图片，可以使用图片预览组件
    if (file.type?.includes('image')) {
      // 使用 TDesign 的图片预览
      window.open(file.url, '_blank');
    } else {
      // 其他文件类型直接在新窗口打开
      window.open(file.url, '_blank');
    }
  } else {
    MessagePlugin.warning('该文件暂不支持预览');
  }
};
</script>

<style lang="scss" scoped>
.file-validate {
  color: #d54941;
  font-size: 12px;
  font-weight: 400;
}
.form-container {
  :deep(.t-form__label) {
    color: #4e5969;
    font-size: 14px;
    font-weight: 400;
  }
}
:deep(.t-form__item) {
  margin-bottom: 8px;
}
:deep(.t-form__label) {
  color: #4e5969;
  padding-right: 16px;
}
.file-container {
  margin: 8px 0;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &__name {
    font-size: 12px;
    color: #00000066;
    margin-right: 8px;
    font-weight: 400;
    font-family: PingFang SC-Bold, PingFang SC;
  }
}
.fsy-container {
  display: flex;
  align-items: center;
  align-self: stretch;
  border-radius: 2px;
  padding: 5px 12px;
  background: #f2f3f5;
  color: #86909c;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin: 8px 0;
  white-space: pre-wrap;
  word-wrap: break-word;    /* 旧版浏览器兼容 */
  overflow-wrap: break-word; /* 更标准的写法 */
  word-break: break-all; 
}
.content-wrapper {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.anchor-section {
  min-height: 600px;
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
}

.validate-ta {
  border: 1px solid #ff4d65;
  border-radius: 4px;
}

.assessment-ok {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  padding: 16px;
  color: var(--light-text-color-text-2, #4e5969);
  font-size: 14px;
  font-weight: 400;
  font-family: PingFang SC-Bold, PingFang SC;
  &__con {
    display: flex;
  }
  .mt-12 {
    margin-top: 12px;
  }
  span {
    color: #4e5969;
    min-width: 76px;
    font-size: 14px;
  }
}
.active {
  border: 1px solid #ff4d65;
}
// :deep(.t-anchor .t-is-active > a){
//   color: #0052D9;
// }
// :deep(.t-anchor__line){
//   background-color: #fff;
// }
// :deep(.t-anchor__item) {
//     --level: 0;
//     height: 28px;
// }
.anchor-container {
  min-width: 280px;
  max-height: 500px; /* 根据需求调整高度 */
  overflow-y: auto;  /* 启用垂直滚动 */
  overflow-x: hidden;
  padding: 0 8px;
  position: relative;

  :deep(.t-menu__content) {
      font-family: PingFang SC-Bold, PingFang SC;
      font-size: 14px;
      font-weight: 400;
      margin-left: 8px;
  }
  :deep(.t-default-menu .t-menu__item) {
    padding: 0;
    color: #000000E5;
    font-weight: 500;
  }
  :deep(.t-menu__item.t-is-active) {
    width: 280px;
    color: var(--td-brand-color);
    background-color: var(--td-brand-color-light);
  }

  &__img {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 8px;
  }
  :deep(.t-default-menu__inner .t-menu) {
    padding: 0;
  }
  :deep(.t-menu) {
    width: 280px;
    margin-left: -8px;
  }
  :deep(.t-menu__content) {
    margin-left: 8px;
  }
  &__name {
    height: 28px;
    line-height: 28px;
    margin-top: 3px;
    font-weight: 400;
    font-size: 14px;
    color: #00000042;
  }
}
.popup {
  padding: 6px;
}
.title-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e7e7e7;
  padding: 3px 8px;
  &__title {
    height: 28px;
    font-size: 16px;
    line-height: 28px;
    color: #000000e5;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 500;
  }
  &__icon {
    margin-top: 4px;
  }
}
.fixed-container {
  height: 72px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 196px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background: #fff;
  box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .checkbox {
    margin-left: 270px;
  }
  &__btn {
    margin-right: 20px;
  }
  .tx-txt {
    display: flex;
    justify-content: flex-end;
    margin-right: -104px;
  }
  .tx-con {
    color: #00000073;
    font-family: PingFang SC-Bold, PingFang SC;
    font-size: 16px;
    font-weight: 400;
    z-index: 99;
  }
  .img {
    margin-right: 5px;
  }
}
:deep(.t-upload__flow-empty) {
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
:deep(.el-input__wrapper) {
  background-color: #f2f3f5 !important;
  box-shadow: none;
  height: 32px;
}
:deep(.el-input__inner) {
  min-width: 40vw;
  height: 32px;
  line-height: 32px;
  color: #86909c;
}
.up-container {
  margin-top: 8px;
  margin-bottom: 20px;
}
.title {
  color: #292b33;
  font-size: 18px;
  line-height: 24px;
  margin-top: 16px;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-family: PingFang SC-Bold, PingFang SC;
}
.sub-title {
  font-size: 16px;
  color: #565960;
  position: relative;
  padding-left: 8px;
  margin-top: 24px;
  font-weight: 500;
  font-family: PingFang SC-Bold, PingFang SC;

  &::before {
    content: ""; /* 在内容前添加竖线 */
    position: absolute;
    width: 3px;
    height: 18px;
    border-radius: 3px;
    background-color: #1966ff;
    left: 0;
    top: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
}
.txt-name {
  color: #565960;
  font-size: 14px;
  line-height: 22px;
  margin-top: 16px;
  font-weight: 500;
  font-family: PingFang SC-Bold, PingFang SC;
}
.txt-label {
  color: #4e5969;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-family: PingFang SC-Bold, PingFang SC;
}
.reason-input {
  margin-top: 4px;
}

.upload-con1 {
  margin-bottom: 60px;
  height: calc(100vh - 288px);
}
.upload-con2 {
  margin-bottom: 0px;
  height: calc(100vh - 230px);
}

.upload-container {
  position: relative;
  display: flex;
  &__menu {
    position: sticky;
    top: 0;
    margin-top: -16px;
    :deep(.t-menu__content) {
      font-family: PingFang SC-Bold, PingFang SC;
      font-size: 14px;
      font-weight: 400;
      color: #565960;
      span{
        font-weight: 600;
        color: #292B33;
      }
    }
    :deep(.t-default-menu__inner .t-menu) {
      padding: 0;
      margin-top: 8px;
    }
    :deep(.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened)) {
      color: #1966ff;
    }
    :deep(.t-divider--vertical) {
      margin: 0;
    }
    :deep(.t-default-menu__inner .t-menu--scroll) {
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  }
  &__line {
    height: calc(100% + 20px);
    width: 2px;
    margin-top: -16px;
  }
  &__up {
    margin: 0 16px;
    flex-grow: 1; /* 让内容区域填充剩余空间 */
    overflow-y: auto; /* 内容区域允许垂直滚动 */
  }
  &__up::-webkit-scrollbar {
    display: none;
  }

  //隐藏滚动条
  &__up {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  &__menu::-webkit-scrollbar {
    display: none;
  }
  &__menu {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}


// .custom-upload-display {
//   margin-top: 16px;
//   max-width: 45vw;
// }

// .upload-table {
//   width: 100%;
//   // border: 1px solid #e7e7e7;
//   border-radius: 4px;
//   overflow: hidden;
// }

// .upload-table-header {
//   display: flex;
//   // background-color: #f5f5f5;
//   height: 46px;
//   padding: 0 16px;
//   line-height: 46px;
//   color: #00000066;
//   font-size: 14px;
//   // border-bottom: 1px solid #e7e7e7;
// }

// // .header-cell {
//   // padding: 0 8px;
// // }

// .upload-table-body {
//   background-color: #fff;
//   border: 1px dashed #e7e7e7;
// }

// .upload-table-row {
//   display: flex;
//    height: 46px;
//   line-height: 46px;
//     padding: 0 16px;
//   align-items: center;
//   border-bottom: 1px solid #f0f0f0;
// }

// .upload-table-row:last-child {
//   border-bottom: none;
// }

// .table-cell {
//   display: flex;
//   align-items: center;
// }
// .table-txt {
//   color: #000000E5;
//   font-size: 14px;
// }
// .table-success {
//   width: 16px;
//   height: 16px;
// }
// .txt-center{
//   display: flex;
//   align-items: center;
// }

// .file-name {
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;
// }
.t-button {
  padding: 0;
  height: auto;
}
</style>
